<div
  class="fixed inset-0 z-50 grid place-content-center bg-black/50 p-4"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modalTitle"
>
  <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
    <div class="flex items-start justify-between">
      <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>

      <button
        type="button"
        class="-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none"
        aria-label="Close"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="mt-4">
      <p class="text-pretty text-gray-700">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
        consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </div>
</div>
